<template>
  <div class="app-container">
    <TheQueryForm :option="searchOption" @onSubmit="onSubmit" @onClear="onClear"></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="24" style="display: flex; justify-content: flex-end">
        <el-button type="primary" size="small" @click="handleExport" :loading="exportLoading">导出</el-button>
      </el-col>
    </el-row>
    <TheTable
      ref="tableRefs"
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import {
  apiListByPlatformSaaS,
  apiExportByPlatformSaaS
} from "@/api/statements.js";
export default {
  data() {
    const _this = this;
    return {
      queryPageApi: apiListByPlatformSaaS,
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          field: "settlementFlowId",
          label: "结算id",
          placeholder: "结算id",
          type: "Input"
        },
        {
          type: "Input",
          field: "saasName",
          label: "服务商名称",
          placeholder: "服务商名称"
        },

        {
          type: "Input",
          field: "orderId",
          label: "订单id",
          maxlength: 20,
          placeholder: "订单id"
        },

        {
          type: "DatePickerRange",
          field: "time",
          label: "发起结算时间",
          placeholder: "发起结算时间"
        }
      ],
      tableOption: [
        {
          label: "结算id",
          prop: "settlementFlowId",
          width: 120
        },
        {
          label: "关联订单id",
          prop: "orderId",
          width: 120
        },
        {
          label: "服务商名称",
          prop: "saasName", 
          width: 250
        },
        {
          label: "结算类型",
          prop: "settleType",
          width: 80,
          formatter({ settleType }) {
            return this.$filters.filterSettleType(settleType);
          }
        },
        {
          label: "结算金额",
          prop: "settlementAmount",
          width: 80,
          formatter({ settlementAmount }) {
            return Number(settlementAmount).tranFormat(2, -2);
          }
        },
        {
          label: "服务商师傅佣金",
          prop: "saasWorkerCommission",
          width: 80,
          formatter({ saasWorkerCommission }) {
            return Number(saasWorkerCommission).tranFormat(2, -2);
          }
        },
        {
          label: "关联售后单",
          prop: "serverSaleReturnId",
          width: 80
        },

        {
          label: "订单支付时间",
          width: 80,
          prop: "orderPayTime",
          render(orderPayTime, { row }) {
            try {
              const strArr = row.orderPayTime.split(" ");
              const dom = (
                <div>
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },

        {
          label: "发起结算时间",
          width: 80,
          prop: "createTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div>
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        }
      ],
      authCode: "",
      code: ""
    };
  },
  mounted() {
    const { code, authCode } = this.$route.query;
    this.code = code;
    this.authCode = authCode;
  },
  methods: {
    async handleExport() {
      this.exportLoading = true;
      const res = await apiExportByPlatformSaaS({
        ...this.queryParams
      });
      if (res.code === "SUCCESS") {
        let header = [
          {
            title: "结算id",
            prop: "settlementFlowId",
            valueType: "s"
          },
          {
            title: "关联订单id",
            prop: "orderId",
            valueType: "s"
          },
          {
            title: "服务商名称",
            prop: "saasName",
            valueType: "s",
          },
         
          {
            title: "结算类型",
            prop: "settleType",
            valueType: "s"
          },
          {
            title: "结算金额",
            prop: "settlementAmount",
            valueType: "n",
            numFmt: $numFmt.money

          },
          {
            title: "服务商师傅佣金",
            prop: "serverProvideWorkerCommission",
            valueType: "n",
            numFmt: $numFmt.money

          },
          {
            title: "关联售后单",
            prop: "serverSaleReturnId",
            valueType: "s"
          },
          {
            title: "订单支付时间",
            prop: "orderPayTime",
            valueType: "s"
          }, {
            title: "发起结算时间",
            prop: "createTime",
            valueType: "s"
          },
        ];

        let dataSource = res.data.map(item => {
          return {
            ...item,
            settleType: this.$filters.filterSettleType(item.settleType),
            settlementAmount:item.settlementAmount/100,
            serverProvideWorkerCommission:item.serverProvideWorkerCommission/100

          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: "服务商结算账单"
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warring"
        });
        this.exportLoading = false;
      }
    },

    onSubmit({ values }) {
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          createStartTime:
            values.time && values.time[0] ? values.time[0] + " 00:00:00" : "",
          createEndTime:
            values.time && values.time[1] ? values.time[1] + " 23:59:59" : ""
        };
        delete values.time;
      }
      this.queryParams = { ...this.queryParams, ...values };
    },
    onClear() {
      this.queryParams = {};
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .row {
  display: flex;
  .span4 {
    flex: 1;
  }
  .span20 {
    flex: 5;
  }
}
::v-deep .badge {
  position: absolute;
  right: -0px;
  top: -10px;
  transform: scale(0.9);
}
</style>
